<template>
  <div>
    <h1>toref用法</h1>
    {{myname}}--{{count}}
    <button @click="add">点我1</button>
    <hr>
    <h1>torefs用法</h1>
    {{myname1}}--{{count1}}
    <button @click="add1">点我2</button>
  </div>
</template>

<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
  setup () {
    const obj = reactive({
      myname: 'zp',
      count: 0
    })

    const obj1 = reactive({
      myname1: 'zp',
      count1: 0
    })
    const add = () => {
      obj.myname += '-'
      obj.count++
    }

    const add1 = () => {
      obj1.myname1 += '-'
      obj1.count1++
    }

    return {
      // toRef和toRefs的作用是把模板中的代码简化，而且不丢失数据的响应式
      myname: toRef(obj, 'myname'),
      count: toRef(obj, 'count'),
      ...toRefs(obj1),
      add,
      add1
    }
  }
}
</script>

<style>
</style>
